<include file="Public/min-header" />
<div class="wrapper">
    <include file="Public/breadcrumb" />
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <nav class="navbar navbar-default">
                            <div class="collapse navbar-collapse">
                                <div class="navbar-form row">
                                    <div class="col-md-1">
                                        <button class="btn bg-navy" type="button" onclick="treeOpen(this);"><i class="fa fa-angle-double-down"></i>展开</button>
                                    </div>
                                    <div class="col-md-9">

                                    </div>
                                    <div class="col-md-2">
                                        <a href="{:U('Goods/addEditCategory')}" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> 新增分类</a>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <table id="list-table" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
                                    <thead>
                                        <tr role="row">
                                            <th width = "8%" class = "align-center">分类ID</th>
                                            <th width= "15%">分类名称</th>
                                            <th width = "15%" class = "align-center">英文名称</th>
                                            <th width = "8%" class = "align-center">是否显示</th>
                                            <!--<th width = "8%" class = "align-center">分组</th>-->
                                            <th width = "8%" class = "align-center">排序</th>
                                            <th width = "9%" class = "align-center">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <foreach name="cat_list" item="vo" key="k">
                                        <tr role="row" class="{$vo.level}" id="{$vo.level}_{$vo.id}" <if condition="$vo[level] gt 1">style="display:none"</if>>
                                        <td align="center">{$vo.id}</td>
                                        <td align="left" style="padding-left:{$vo['level']}em">
                                        <if condition="$vo.have_son eq 1">
                                            <span class="glyphicon glyphicon-plus btn-warning" style="padding:2px; font-size:12px;" id="icon_{$vo.level}_{$vo.id}" aria-hidden="false" onclick="rowClicked(this)"></span>&nbsp;
                                        </if>
                                        <span>{$vo.name}</span>
                                        </td>
                                        <td><span>{$vo.en_name}</span></td>
                                        <td align="center">
                                            <img width="20" height="20" src="__PUBLIC__/images/<if condition='$vo[status] eq 1'>yes.png<else />cancel.png</if>" onclick="changeTableVal('goods_cat', 'id', '{$vo.id}', 'is_show', this)" />
                                        </td>
                                        <td align="center">
                                            <input type="text" onchange="updateSort('goods_cat', 'id', '{$vo.id}', 'sort_order', this)" onkeyup="this.value = this.value.replace(/[^\d]/g, '')" onpaste="this.value=this.value.replace(/[^\d]/g,'')" size="4" value="{$vo.sort_order}" class="input-sm" />
                                        </td>
                                        <td>
                                            <a class="btn btn-primary" href="{:U('Goods/addEditCategory',array('id'=>$vo['id']))}"><i class="fa fa-pencil"></i></a>
                                            <a class="btn btn-danger" href="javascript:del_fun('{:U('Goods/delgoodsCat',array('id'=>$vo['id']))}');"><i class="fa fa-trash-o"></i></a>
                                        </td>
                                        </tr>
                                    </foreach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script type="text/javascript">
// 展开收缩
    function  treeOpen(obj) {
        var tree = $('#list-table tr[id^="2_"], #list-table tr[id^="3_"] '); //,'table-row'
        if (tree.css('display') == 'table-row')
        {
            $(obj).html("<i class='fa fa-angle-double-down'></i>展开");
            tree.css('display', 'none');
            $("span[id^='icon_']").removeClass('glyphicon-minus');
            $("span[id^='icon_']").addClass('glyphicon-plus');
        } else
        {
            $(obj).html("<i class='fa fa-angle-double-up'></i>收缩");
            tree.css('display', 'table-row');
            $("span[id^='icon_']").addClass('glyphicon-minus');
            $("span[id^='icon_']").removeClass('glyphicon-plus');
        }
    }
// 以下是 bootstrap 自带的  js
    function rowClicked(obj) {
        span = obj;
        obj = obj.parentNode.parentNode;
        var tbl = document.getElementById("list-table");
        var lvl = parseInt(obj.className);
        var fnd = false;
        var sub_display = $(span).hasClass('glyphicon-minus') ? 'none' : '' ? 'block' : 'table-row';
        if (sub_display == 'none') {
            $(span).removeClass('glyphicon-minus btn-info');
            $(span).addClass('glyphicon-plus btn-warning');
        } else {
            $(span).removeClass('glyphicon-plus btn-info');
            $(span).addClass('glyphicon-minus btn-warning');
        }
        for (i = 0; i < tbl.rows.length; i++) {
            var row = tbl.rows[i];
            if (row == obj) {
                fnd = true;
            } else {
                if (fnd == true) {
                    var cur = parseInt(row.className);
                    var icon = 'icon_' + row.id;
                    if (cur > lvl) {
                        row.style.display = sub_display;
                        if (sub_display != 'none') {
                            var iconimg = document.getElementById(icon);
                            $(iconimg).removeClass('glyphicon-plus btn-info');
                            $(iconimg).addClass('glyphicon-minus btn-warning');
                        } else {
                            $(iconimg).removeClass('glyphicon-minus btn-info');
                            $(iconimg).addClass('glyphicon-plus btn-warning');
                        }
                    } else {
                        fnd = false;
                        break;
                    }
                }
            }
        }
        for (i = 0; i < obj.cells[0].childNodes.length; i++) {
            var imgObj = obj.cells[0].childNodes[i];
            if (imgObj.tagName == "IMG") {
                if ($(imgObj).hasClass('glyphicon-plus btn-info')) {
                    $(imgObj).removeClass('glyphicon-plus btn-info');
                    $(imgObj).addClass('glyphicon-minus btn-warning');
                } else {
                    $(imgObj).removeClass('glyphicon-minus btn-warning');
                    $(imgObj).addClass('glyphicon-plus btn-info');
                }
            }
        }
    }
</script>
</body>
</html>
